<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>社保增员</title>
	
	<link href="../js/index.css" rel="stylesheet" />
	<style>
		#demo {
			margin-left: 100px;
			margin-top: 50px;
		}
		#demo .sbfa{
			padding-top: 30px;
		}
		#demo .sbcs {
			padding-top: 30px;
			padding-bottom: 30px;
		}
		#demo .file {
			padding-bottom: 30px;
			padding-left: 120px;
		}
		.sbfa select, .sbcs select {
			width: 216px;
			height: 38px;
		}
		.sbfa select {
			margin-left: 20px;
			border-color: #DCDFE6;
			color: #DCDFE6
		}
		.el-icon-arrow-up:before {
			content: "△";
		}
		.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
			position: absolute;
			right: 20px;
			font-family: element-icons;
			content: "√";
			font-size: 12px;
			font-weight: 700;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		.el-icon-close:before {
			content: "×";
		}
	</style>
</head>
<body>
	<div id="demo">
		<!-- 社保方案 -->
		<div class="sbfa">
			<label>请选择社保方案:</label>
			<select @change="getValue" v-model="selected">
				<option value="">请选择</option>
				{{programmes}}
				<option v-for="(item, index) in programmes" v-bind:key="index" v-bind:value="item.id">{{item.value}}</option>
			</select>
		</div>
		<!-- 城市 -->
		<div class="sbcs">
			<label>请选择社保城市:</label>
			<el-select v-model="value11" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		
		<!-- 下载按钮 -->
		<div class="file">
			<a href="javascript:;" @click="downFile">请下载社保增员模板</a>
		</div>
		<!-- 选择文件 -->
		<div>
			<button type="button" class="layui-btn" id="test1">
				<i class="layui-icon">&#xe67c;</i>选择文件
			</button>
		</div>
	</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el:'#demo',
		data:{
			selected:'',
			selected2:'',
			programmes:[{id:"32435345", value:"自行申报"}, {id:"66554478", value:"代理"}, {id:"2345678901", value:"派遣"}],
			citys:'',
			        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value5: [],
        value11: []
		},
		methods:{
			getValue:function() {
				const city1 = {key:"32435345", cs:["北京", "上海", "广州", "杭州"]};
				const city2 = {key:'66554478', cs:["深圳", "杭州"]};
				const city3 = {key:'2345678901', cs:[]};
				if(city1.key === this.selected) {
					this.citys = city1;
				} else if(city2.key === this.selected) {
					this.citys = city2;
				} else {
					this.citys= city3;
				}
				console.log(JSON.stringify(this.citys));
			},
			downFile(){
				const fangan = this.selected;
				const city = this.selected2;
				console.log(fangan + "==" + city);
			}
		}
	});
</script>
</body>
</html>
